<template>
  <transition name="message-fade">
    <div v-if="visible" class="message" :class="type">
      <div class="message-content">
        <i :class="iconClass"></i>
        <span>{{ message }}</span>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Message',
  props: {

    type: {
      type: String,
      default: 'info',
      validator: value => ['success', 'warning', 'error', 'info'].includes(value)
    },
    duration: {
      type: Number,
      default: 3000
    }
  },
  data() {
    return {
      message:'',
      visible: false
    }
  },
  computed: {
    iconClass() {
      const iconMap = {
        success: 'fa fa-check-circle',
        warning: 'fa fa-exclamation-circle',
        error: 'fa fa-times-circle',
        info: 'fa fa-info-circle'
      }
      return iconMap[this.type]
    }
  },
  methods: {
    show() {
      this.visible = true
      if (this.duration > 0) {
        setTimeout(() => {
          this.hide()
        }, this.duration)
      }
    },
    hide() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 8px;
  background-image: linear-gradient(40deg, #ff43c0 0%, #ffa95c 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  min-width: 300px;
  text-align: center;
}

.message-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.message-content i {
  font-size: 18px;
}

/* 动画效果 */
.message-fade-enter-active,
.message-fade-leave-active {
  transition: all 0.3s ease;
}

.message-fade-enter-from,
.message-fade-leave-to {
  opacity: 0;
  transform: translate(-50%, -20px);
}
</style>
